<template>
  <view class="template-particle">
    <!-- 顶部自定义导航 -->
    <TnNavbar fixed alpha customBack :placeholder="false" bg-color="transparent" :bottom-shadow="false">
      <view slot="back" class='tn-custom-nav-bar__back'>
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
      <view v-if="seerInfo" class="tn-black_text tn-text-lg tn-text-bold">{{ seerInfo.name }}</view>
    </TnNavbar>
    <scroll-view
        scroll-y
        style="position: fixed;width: 100%;height: 100vh;background-color: rgba(255,255,255,0.5); padding: 10px; z-index: 10"
        :style="{paddingTop: height + 'px', paddingBottom: bottom + 'px'}"
    >
      <view v-html="html"></view>
    </scroll-view>
    <canvas canvas-id="star_canvas" class="mycanvas"
            :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;'"></canvas>
    <loading-page :show="loading" @click.stop=""/>
  </view>
</template>

<script>
  import TnIcon from "../../uni_modules/tuniaoui-vue3/components/icon/src/icon.vue";
  import TnNavbar from "../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import {useUniAppSystemRectInfo} from "../../uni_modules/tuniaoui-vue3/hooks/use-uniapp-system-rect-info";
  import LoadingPage from "../../components/loadingPage.vue";
  import getCaptureDetail from '../../common/vmeitime-http/index'
  import {getCurrentInstance} from 'vue'

  const Point = class {
    constructor(x, y) {
      this.x = x
      this.y = y
      this.r = 1 + Math.random() * 2
      this.sx = Math.random() * 2 - 1
      this.sy = Math.random() * 2 - 1
    }

    draw(ctx) {
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
      ctx.closePath()
      ctx.fillStyle = '#fff'
      ctx.fill()
    }

    move(w, h) {
      this.x += this.sx
      this.y += this.sy
      if (this.x > w || this.x < 0) this.sx = -this.sx
      if (this.y > h || this.y < 0) this.sy = -this.sy
    }

    drawLine(ctx, p) {
      const dx = this.x - p.x
      const dy = this.y - p.y
      const d = Math.sqrt(dx * dx + dy * dy)
      if (d < 100) {
        var alpha = (100 - d) / 300 * 1
        ctx.beginPath()
        ctx.moveTo(this.x, this.y)
        ctx.lineTo(p.x, p.y)
        ctx.closePath()
        ctx.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')'
        ctx.strokeWidth = 1
        ctx.stroke()
      }
    }
  }

  const sysinfo = uni.getSystemInfoSync()
  const w = 400
  const h = 1000
  export default {
    name: 'TemplateParticle',
    components: {LoadingPage, TnNavbar, TnIcon},
    data() {
      return {
        ctx: null,
        screenWidth: sysinfo.screenWidth,
        screenHeight: sysinfo.screenHeight,
        timer: null,
        points: [],
        seerInfo: null,
        html: '',
        height: useUniAppSystemRectInfo().navBarInfo.height,
        bottom: sysinfo.safeAreaInsets.bottom,
        loading: false,
        proxy: null
      }
    },
    async onLoad(options) {
      const {
        proxy
      } = getCurrentInstance()
      this.proxy = proxy
      this.loading = true
      this.from = options.from || ''

      for (let i = 0; i < 80; i++) {
        this.points.push(new Point(Math.random() * w, Math.random() * h))
      }
      this.ctx = uni.createCanvasContext('star_canvas')

      this.gameloop() //进行
      this.seerInfo = JSON.parse(options.data)
      await this.getDetail()
      this.loading = false
    },
    onUnload() {
      clearTimeout(this.timer)
    },

    methods: {
      /**粒子进行*/
      gameloop() {
        this.timer = setTimeout(this.gameloop, 100);
        this.paint();
      },
      /**清空画布*/
      paint() {
        this.ctx.clearRect(0, 0, w, h)
        for (var i = 0; i < this.points.length; i++) {
          this.points[i].move(w, h)
          this.points[i].draw(this.ctx)
          for (var j = i + 1; j < this.points.length; j++) {
            this.points[i].drawLine(this.ctx, this.points[j])
          }
        }
        this.ctx.draw();
      },
      async getDetail() {
        this.html = await this.proxy.$api.getCaptureDetail({
          url: this.seerInfo.capture
        })
      }
    }
  }

</script>

<style lang="scss" scoped>
  .template-particle {
    background: -webkit-gradient(linear, left top, right top, from(#892FE8), to(#3D7EFF));
    background: linear-gradient(90deg, #892FE8, #3D7EFF);
    min-height: 100vh
  }

  .template-particle:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
    -webkit-mask-image: linear-gradient(to bottom, transparent, black);
    mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
    mask-image: linear-gradient(to bottom, transparent, black);
    background: -webkit-gradient(linear, left top, right top, from(#E72F8C), to(#892FE8));
    background: linear-gradient(90deg, #E72F8C, #892FE8);
  }

  .mycanvas {
    background-size: cover;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    flex-direction: column;
    color: #fff;
  }
</style>
